<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    //1.没有块级作用域引起的问题：for的块级
    // 闭包可解决此问题，函数是一个作用域
    var btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
        // ES5中没使用闭包
        // btns[i].addEventListener('click', function () {
        //     console.log('第' + i + '个按钮被点击') // 最后i等于5，所有按钮点击事件中console.log中的i（0、1、2、3、4）变量都修改为5
        // })
        // ES5中使用闭包
        (function (i) {
            btns[i].addEventListener('click', function () {
                console.log('第' + i + '个按钮被点击')
            })
        })(i)
    }

    // ES6
    // let作用域小，局部
    const btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击')
        })
    }

</script>
</body>
</html>